<template>
  <div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <!-- ECharts容器默认宽高是0，不设置不显示 -->
    <div id="myChart" ref="mDiv"></div>
  </div>

</template>

<script>
import *as echarts from 'echarts';

export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      /* let myChart = echarts.init(document.getElementById('myChart'))
 */
      let mDiv = echarts.init(this.$refs.mDiv);
      // 绘制图表
      /*      mDiv.setOption({
              title: { text: '在Vue中使用echarts' },
              tooltip: {},
              xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
              },
              yAxis: {},
              series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }]
            });*/

      mDiv.setOption({
        title: {
          //设置图标的标题
          text: '性能统计图表',
          // link:"http://127.0.0.1:555",
          target: 'self',
          // backgroundColor:"red",
          borderColor: "pink",
          x: "center",
          // subtext:'副标题'

        },
        //提示框组件
        tooltip: {
          show: true,//是否显示
          //触发类型
          trigger: "axis",//触发类型 item图形触发：散点图、饼图等无类目轴的图表中使用 axis坐标轴触发 none什么都不触发
          //坐标轴指示器
          axisPointer: {
            type: "cross"//line 显示一个实线，shadow阴影 cross十字准星
          },
          // showContent:false,
          backgroundColor: "yellow",
          borderColor: "red",
          borderWidth: 5,
          textStyle: {
            color: "blue"
          },
          //自定义的提示框信息
          formatter(params) {
            console.log(params);
            // eslint-disable-next-line for-direction
            for (var i = 0; i > params.length; i++) {
              return "名字：" + params[i].name + "数量：" + params[i].data.value;
            }
          }

        },
        xAxis: {
          //x轴的提示文本
          data: ['接收的正常包', '发送的正常包', '接收的秒级峰值', '发送的秒级峰值', '近端丢包率', '输出光功率', '误码秒']
        },
        yAxis: {
          // data:[10,20,30]
        },
        series: {
          name: 'Pets',
          type: 'bar',//设置图表的类型为柱状图，还有line、pie
          barWidth: 50,//设置柱状图的柱子宽度
          color: "red",//设置柱状图的颜色
          //单独设置每个轴的颜色
          itemStyle: {
            normal: {
              color: function (params) {
                let colorList = [
                  "red",
                  "#efd784",
                  "blue",
                  "#a1f54e",
                  "#e79c9c",
                  "#56c79a",
                  "#f3a4ef",

                ]
                return colorList[params.dataIndex]
              }
            }
          },
          data: [
            {value: 5, "name": "h3"},
            {value: 4, "name": "a3"},
            {value: 3, "name": "c3"},
            {value: 8, "name": "d3"},
            {value: 4, "name": "E3"},
            {value: 3, "name": "F3"},
            {value: 8, "name": "G3"},
          ],
          //最大值/最小值
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值"
              },
              {
                type: "min",
                name: "最小值"
              }
            ]
          },
          //图表的标线
          markLine: {
            data: [
              {
                type: "average",
                name: "平均值"
              }
            ]
          }
        }
      })
    },

  }
}
</script>

<style>


el-switch {
  padding-left: 5px;
}

#myChart {
  width: 600px;
  height: 600px;
  background-color: #ffffff;
}

.el-table .warning-row {
  background: #d08787;
}

.el-table .success-row {
  background: #59bb22;
}

.el-table--enable-row-hover .el-table__body :hover {

  background-color: #e7e794;

}

.el-table .other-row {
  background: #2d8daa;
}
</style>
